<!-- 分类 tabbar -->
<template>
	<view class="sort-view">
		<!-- 左边 -->
		<view class="sort-left">
			<text v-for="(item,index) in sort" :key="index" @click="selectSort(index,item.sort_name)" :class="[sortNum == index ? 'select-style' : '']">{{item.sort_name}}</text>
		</view>
		<!-- 右边 -->
		<view class="sort-right">
			<!-- 分类标题 -->
			<view class="title" v-if="sort.length > 0">{{sort_name}}</view>
			<!-- 商品 -->
			<view class="commodity" v-for="(item,index) in goods" :key="index" @click="goDetail(item._id)">
				<view class="commodity-image">
					<image :src="item.goods_cover" mode="aspectFill"></image>
					<view :class="[item.stock <= 0 ? 'overdue-img' : '']"></view>
				</view>
				<view class="commodity-price">
					<text class="overflow">{{item.goods_title}}</text>
					<text>¥{{item.goods_price}}</text>
				</view>
			</view>
			<!-- 上拉加载 -->
			<view class="loading-height">
				<Loading v-if="loading"></Loading>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Loading from '@/components/loading.vue'
	import { ref, onMounted, reactive, toRefs } from 'vue'
	import { onReachBottom } from '@dcloudio/uni-app'

	onMounted(() => {
		getData()
	})

	const data = reactive({
		sort: [], // 分类列表
		goods: [], // 商品列表
		sortNum: 0, // 分类的下标，用以设置点击分类样式改变，默认为 0
		sort_name: '', // 存储点击的分类的名字，用以上拉加载和不同分类展示不同商品
		loading: false, // 上拉加载圈圈是否展示
		pageNum: 0, // 请求的页数，每请求一次，页数 +1
	})
	const { sort, goods, sortNum, loading, sort_name } = toRefs(data)


	// 1、页面加载时从数据库中获取商品的分类以及第一个对应的商品
	const db = wx.cloud.database()
	const _ = db.command
	async function getData() {
		// 1-1  获取所有商品分类（前提是该分类下有商品）
		const res_sort = await db.collection('goods_sort').where({
			quantity: _.gt(0)
		}).get()

		// 获取第一个分类的分类名
		data.sort_name = res_sort.data[0].sort_name

		// 赋值用以渲染分类数组
		data.sort = res_sort.data
		data.pageNum = 0 // 每次该页面展示的时候，请求页数置为 0

		// 1-2 请求第一个分类的商品
		selectSort(0, data.sort_name)

	}

	// 2、点击分类获取对应的商品
	async function selectSort(index, sort_name) {
		// 点击不同页面分类展示的时候，请求页数置为 0
		data.pageNum = 0
		// 点击分类增加样式
		data.sortNum = index
		// 将点击的分类赋值存起来
		data.sort_name = sort_name

		// 获取点击分类所属数据
		const res = await db.collection('goods').where({
			category: sort_name
		}).field({
			// 选择要返回的数据
			goods_title: true,
			goods_cover: true,
			goods_price: true,
			stock:true
		}).limit(10).get()

		data.goods = res.data
	}

	// 3、上拉加载
	onReachBottom(async () => { //onReachBottom只能在父组件才能触底
		data.loading = true
		data.pageNum++
		let skip = data.pageNum * 10
		const res = await db.collection('goods').where({
			category: data.sort_name
		}).field({
			goods_title: true,
			goods_cover: true,
			goods_price: true
		}).limit(10).skip(skip).get()

		data.goods = [...data.goods, ...res.data]
		data.loading = false
	})

	// 4、跳转详情页
	function goDetail(id) {
		uni.navigateTo({
			url: `/pages/goods-detail/goods-detail?goods_id=${id}`
		})
	}
</script>

<style scoped>
	.sort-view {
		display: flex;
	}

	.sort-left {
		width: 200rpx;
		text-align: center;
		background-color: #f6f6f6;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
	}

	.sort-left text {
		display: block;
		color: #5f5f5f;
		padding: 20rpx 0;
		border-bottom: 1px solid #FFFFFF;
		font-size: 28rpx;
	}

	/* 左边选中*/
	.select-style {
		background-color: #FFFFFF !important;
	}

	/* 右边 */
	.sort-right {
		margin: 0 20rpx 0 220rpx;
		flex: 1;
	}

	.title {
		padding: 20rpx 0;
		font-size: 28rpx;
		font-weight: bold;
	}

	.commodity {
		display: flex;
		height: 150rpx;
		margin-bottom: 20rpx;
	}

	.commodity-image {
		width: 150rpx;
		height: 150rpx;
		position: relative;
	}

	.overdue-img {
		/* background-image: url("https://gitee.com/Angussd/note-image/raw/master/Image/202304031408856.png"); */
		background-image: url("https://gitee.com/Angussd/note-image/raw/master/Image/202304031418604.png");
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 10rpx;
		left: -10rpx;
		width: 170rpx;
		height: 150rpx;
	}


	.commodity image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.commodity-price {
		flex: 1;
		position: relative;
		padding-left: 20rpx;
		font-weight: bold;
	}

	.commodity-price text:nth-child(2) {
		position: absolute;
		bottom: 0;
		color: #f36825;
	}
</style>
